<template>
  <div class="left-chart-1">
    <dv-scroll-board v-if="config.data" :config="config" class="lc1-chart" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import { getEquipIndexBoard } from "@/api/dashboard/injectionWorkshop";
export default {
  name: "rightChart2",
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    workshopItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      config: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 设备情况
    async getData() {
      if (!this.workshopItem?.value) {
        return;
      }
      let tableData = [];
      try {
        const res = await getEquipIndexBoard({
          workshopId: this.workshopItem.value,
          category: "inject",
        });

        tableData = res.data.equipConditionMap.inject || [];
      } catch (error) {
        tableData = [];
      }
      this.formatter(tableData);
    },
    formatter(tableData) {
      if (!tableData?.length) {
        this.config = {};
        return;
      }

      let headList = tableData[0].collectList.map((ele) => ele.lineName);
      let columnWidth = tableData[0].collectList.map((ele) => 1000);
      let dataList = [];

      tableData.forEach((row) => {
        let rowObj = [
          `${row.singleName}`,
          `<span class='standar'>
            ${row.abnormalMin || ""}
            ${row.abnormalMin && row.abnormalMax ? "~" : ""}
            ${row.abnormalMax || ""}
            ${row.abnormalUnit == "无" ? "" : row.abnormalUnit || ""}
          </span>`,
        ];
        if (row.collectList?.length) {
          row.collectList.forEach((col) => {
            rowObj.push(
              `<span class='${
                this.isAbnormal(
                  col.latestCollectValue,
                  row.abnormalMin,
                  row.abnormalMax
                )
                  ? "status-error"
                  : "status-normal"
              }'>${col.latestCollectValue || ""}</span>`
            );
          });
        }
        dataList.push(rowObj);
      });

      this.config = {
        headerBGC: "#050f67",
        header: ["参数名称", "参数标准", ...headList],
        data: dataList,
        rowNum: 9,
        columnWidth: [1300, 1200, ...columnWidth],
        align: ["center", "center", "center", "center", "center", "center"],
        oddRowBGC: "#053a6d",
        evenRowBGC: "#091c56",
      };
    },
    isAbnormal(value, min, max) {
      let isAbnormalFlag = false;
      if ([undefined, null, ""].includes(value)) {
        return isAbnormalFlag;
      }
      if (![undefined, null, ""].includes(min)) {
        isAbnormalFlag = Number(value) < Number(min);
      } else if (![undefined, null, ""].includes(max)) {
        isAbnormalFlag = Number(value) > Number(max);
      }
      return isAbnormalFlag;
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  font-size: 15px;
  padding-top: 42px;

  .lc1-chart {
    flex: 1;
  }

  ::v-deep .dv-scroll-board {
    .header {
      font-size: 12px;
      .header-item {
        white-space: normal;
        line-height: normal !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    }
    .rows .ceil {
      font-size: 12px;
      white-space: unset;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .status-normal {
      font-weight: 600;
      color: #92d050;
    }
    .status-error {
      font-weight: 600;
      color: #f54e1e;
    }
    .standar {
      font-weight: 600;
      color: #768599;
    }
  }
}
.no-data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
